<template>
  <IonPage>
    <IonContent>
      <div class="main">
        <div class="pie" ref="pie"></div>
      </div>
    </IonContent>
  </IonPage>
</template>

<style scoped lang="less">
.main {
  width: 100vw;
  height: 100vh;

  .pie {
    width: 100vw;
    height: 100vw;
  }
}
</style>
<script setup lang="ts">
import * as echarts from "echarts/core";
import { IonContent, IonPage } from "@ionic/vue";
import { ToolboxComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { onMounted, ref, render } from "vue";
echarts.use([
  ToolboxComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);

let pie: HTMLDivElement = ref().value;
onMounted(() => {
  let pieView = echarts.init(pie, {
    renderer: "svg", // 必须使用 SVG 模式
    ssr: true, // 开启 SSR
  });
  console.log(pie);
  var option;

  option = {
    legend: {
      top: "bottom",
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: "Nightingale Chart",
        type: "pie",
        radius: [50, 250],
        center: ["50%", "50%"],
        roseType: "area",
        itemStyle: {
          borderRadius: 8,
        },
        data: [
          { value: 40, name: "rose 1" },
          { value: 38, name: "rose 2" },
          { value: 32, name: "rose 3" },
          { value: 30, name: "rose 4" },
          { value: 28, name: "rose 5" },
          { value: 26, name: "rose 6" },
          { value: 22, name: "rose 7" },
          { value: 18, name: "rose 8" },
        ],
      },
    ],
  };

  option && pieView.setOption(option);
});
</script>
